<template>
  <div>
    <div style="margin-top: 12px">
      <el-input style="width: 400px" placeholder="请输入标题" suffix-icon="el-icon-search" v-model="name"></el-input>
      <el-button style="margin-left: 5px" type="primary" @click="load">搜索</el-button>
      <el-button style="margin-left: 5px" type="warning" @click="reset">重置</el-button>
    </div>

    <div style="margin: 10px 0; width: 100%;">
      <div style="padding: 20px 0; border-bottom: 1px dashed #ccc; display: flex" v-for="item in tableData" :key="item.id" >
        <div>
          <img :src="item.coverUrl" alt="" style="width: 110px; height: 60px; margin-right: 10px"/>
        </div>
        <div style="margin-top: 10px">
          <div style="padding: 5px; font-size: 16px; cursor: pointer" @click="$router.push('/front/articleDetail?id=' + item.id)">{{item.name}}</div>
          <div style="padding: 5px; font-size: 12px">
            <div style="display: inline-block; width: 80px"><i class="el-icon-user-solid"></i><span>{{item.user}}</span></div>
            <i class="el-icon-time" style="margin-left: 5px;"></i><span>{{ new Date(item.createTime).toLocaleDateString() }}</span>
          </div>
        </div>
      </div>
    </div>


    <div style="padding: 2px 0">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[2, 4, 6, 8]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>

    <el-dialog title="文章内容" :visible.sync="dialogContentVisible" width="60%">
        <div>
          <mavon-editor
            class="md"
            :value="content"
            :subfield="false"
            :defaultOpen="'preview'"
            :toolbarsFlag="false"
            :editable="false"
            :scrollStyle="true"
            :ishljs="true"
            />
        </div>

    </el-dialog>
  </div>
</template>

<style>


</style>

<script>
import axios from "axios";

export default {
  name: "FrontArticle",
  data() {
    return {
      tableData: [],
      total:0,
      name:"",
      pageSize:4,
      pageNum:1,
      form:{},
      dialogFormVisible: false,
      dialogContentVisible: false,
      multipleSelection: [],
      content:''
    }
  },
  created() {
    this.load();
  },
  methods :{
    view(content) {
      this.content = content
      this.dialogContentVisible = true
    },
    // 请求分页查询数据
    load(){
      this.request.get("/article/page",{
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          name: this.name,
        }
      }).then(res => {
        this.tableData = res.data.records
        this.total = res.data.total
      })

    },


    //实现批量选择
    handleSelectionChange(val) {
      console.log(val)
      this.multipleSelection = val
    },
    //批量删除
    delBatch() {
      let ids = this.multipleSelection.map(v => v.id) // 得到每个选择对象的 id
      console.log(ids)
      this.request.post("/article/del/batch", ids).then(res => {
        if (res.data) {
          this.$message.success("批量删除成功")
        } else {
          this.$message.error("批量删除失败")
        }
        this.load()
      })
    },

    // 改变页大小
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.load();
    },
    // 改变当前页
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum
      this.load();
    },
    // 重新设置搜索框
    reset() {
      this.name = ""
      this.load()
    },
  }
}
</script>